<template>
  <div>
    <el-table
      v-loading="listloading"
      :data="list && list.items"
      class="fb-table"
      element-loading-text="加载中..."
      empty-text="暂无数据"
      header-cell-class-name="order-data-header-cell"
      fit
      hightlight-current-row>
      <el-table-column align="left" label="收入项" min-width="100px">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.name" />
        </template>
      </el-table-column>
      <el-table-column align="left" label="收入来源" min-width="100px">
        <template slot-scope="scope">
          <div>{{ scope.row.sourceId | sourceStatus }}</div>
        </template>
      </el-table-column>
      <el-table-column align="left" label="收入细项" min-width="100px">
        <template slot-scope="scope">
          <div v-if="scope.row.sourceId === 2">
            <ToolTip :content="scope.row.incomeDetail" />
          </div>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="创建人" min-width="100px">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.creator" />
        </template>
      </el-table-column>
      <el-table-column align="left" label="创建时间" min-width="180px">
        <template slot-scope="scope">
          <span v-if="scope.row.createTime">{{ scope.row.createTime | format('YYYY/MM/DD HH:mm:ss') }}</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="操作" width="100" fixed="right">
        <template slot-scope="scope">
          <el-button v-if="hasRouteAuth('system:income:edit')" type="text" @click="toEdit(scope.row)"><span style="font-size:14px;">编辑</span></el-button>
          <el-button v-if="hasRouteAuth('system:income:del')" type="text" @click="deleteItem(scope)"><span style="font-size:14px;">删除</span></el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="display:flex;justify-content:flex-end;margin-top:8px;">
      <el-pagination
        v-if="list"
        :current-page="list.page"
        :page-size="list.perPage"
        :total="list.total"
        :page-sizes="[10, 20, 50, 100, 250, 500]"
        :layout="showMobilePage?'total, prev, next, jumper':'total, prev, pager, next, sizes, jumper'"
        style="padding: 0 !important;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>
    <CreateIncomeDialog ref="createIncomeDialog" @update="update"/>
  </div>
</template>
<script>
import Title from '@/components/Title';
import { hasRouteAuth } from '@/utils/permission';
import { getIcomeKindList, incomeKindDel } from '@/api/config';
import setting from '@/assets/setting.png';
import CreateIncomeDialog from './createIncomeDialog';
import { mapState } from 'vuex';
import { format } from '@/filters/date';

export default {
  name: 'IncomeListDialog',
  components: { Title, CreateIncomeDialog },
  filters: {
    format,
    sourceStatus(val) {
      const status = {
        0: '渠道订单',
        1: '项目订单',
        2: '萌力订单'
      };
      return status[val] || '--';
    }
  },
  data() {
    return {
      setting,
      page: 1,
      perPage: 10,
      list: null,
      listloading: false
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  created() {
    this.getList(true);
  },
  methods: {
    hasRouteAuth,
    opened() {
      this.getList(true);
    },
    getList(reset = false) {
      if (reset) this.page = 1;
      this.listloading = true;
      getIcomeKindList({ page: this.page, perPage: this.perPage }).then(res => {
        this.listloading = false;
        if (res.code === 200) {
          this.list = res.data;
        } else {
          this.$message.error(res.message);
        }
      }).catch(() => {
        this.listloading = false;
      });
    },
    handleSizeChange(val) {
      this.perPage = val;
      this.getList(true);
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getList();
    },
    toEdit(data) {
      this.$refs['createIncomeDialog'].initInfo(data);
      this.$refs['createIncomeDialog'].dialogVisible = true;
    },
    deleteItem(scope) {
      this.$confirm('请确认是否删除', '', {
        confirmButtonText: '确定',
        type: 'warning',
        showClose: false,
        center: true,
        dangerouslyUseHTMLString: true,
        iconClass: 'charge-icon',
        customClass: 'del-message del-message-cancel'
      }).then(() => {
        incomeKindDel(scope.row.id).then(res => {
          if (res.code === 200) {
            this.$message.success('删除成功');
            this.getList();
          }
        }).catch(err => {
          console.error(err);
        });
      });
    },
    update(isAdd = true) {
      this.getList(isAdd);
    }
  }
};
</script>
<style lang="scss" scoped>
.income-kind-dialog {
  &::v-deep {
    .el-dialog {
      width: 800px !important;
    }
  }
  .flex {
    display: flex;
    align-items: center;
  }
}
.mobile-el-dialog {
  &::v-deep {
    .el-dialog{
      width: 100% !important;
    }
  }
}
</style>
